<template>
  <el-date-picker v-model="dataCache.datetime"
                  :type="type" :align="align" :clearable="clearable" @change="filterChange"
                  :default-time="defaultTime" :picker-options="pickerOptions" :size="size"
                  :start-placeholder="$t('form.datetime.start')" :end-placeholder="$t('form.datetime.end')">
  </el-date-picker>
</template>

<script>
export default {
  name: "PageOptionDatetimeRange",
  model: {
    prop: 'datetime',
    event: 'change'
  },
  props: {
    type: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: null
    },
    align: {
      type: String,
      default: 'left'
    },
    defaultTime: {
      type: Array,
      default: () => ['00:00:00', '23:59:59']
    },
    defaultShortcuts: {
      type: Boolean,
      default: false
    },
    datetime: {
      type: Array,
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    },
    initLastDay: {
      type: Number,
      default: null
    },
    initLastDayEvent: {
      type: Boolean,
      default: true
    },
    disabledTodayBefore: {
      type: Boolean,
      default: false
    },
    disabledTodayAfter: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dataCache: {
        datetime: null,
      },
    }
  },
  computed: {
    // 时间选择器参数
    // 根据选择的参数
    // pickerOptions: function () {
    //     let shortcuts = [{
    //         text: this.$t('datePickerOptions.today'),
    //         onClick: (picker) => {
    //             let timed = this.$store.getters['config/timedDayTimestamp']();
    //             let end = new Date(timed * 1000 + 1000 * 3600 * 24 - 1000 * 1);
    //             let start = new Date(timed * 1000);
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }, {
    //         text: this.$t('datePickerOptions.yesterday'),
    //         onClick: (picker) => {
    //             let timed = this.$store.getters['config/timedDayTimestamp']();
    //             let end = new Date(timed * 1000 - 1000 * 1);
    //             let start = new Date(timed * 1000 - 1000 * 3600 * 24 * 1);
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }, {
    //         text: this.$t('datePickerOptions.lastWeek'),
    //         onClick: (picker) => {
    //             let timed = this.$store.getters['config/timedDayTimestamp']();
    //             let end = new Date(timed * 1000 + 1000 * 3600 * 24 - 1000 * 1);
    //             let start = new Date(timed * 1000 - 1000 * 3600 * 24 * 6);
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }, {
    //         text: this.$t('datePickerOptions.lastMonth'),
    //         onClick: (picker) => {
    //             let timedDay = this.$store.getters['config/timedDayTimestamp']();
    //             let timedMonth = this.$store.getters['config/timedMonthTimestamp']();
    //             let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
    //             let start = new Date(timedMonth * 1000);
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }, {
    //         text: this.$t('datePickerOptions.lastThreeMonths'),
    //         onClick: (picker) => {
    //             let timedDay = this.$store.getters['config/timedDayTimestamp']();
    //             let timedDate = this.$store.getters['config/timedDate']();
    //             let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
    //             let start = timedDate.startOf('month').subtract(2, 'month').toDate()
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }, {
    //         text: this.$t('datePickerOptions.lastSixMonths'),
    //         onClick: (picker) => {
    //             let timedDay = this.$store.getters['config/timedDayTimestamp']();
    //             let timedDate = this.$store.getters['config/timedDate']();
    //             let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
    //             let start = timedDate.startOf('month').subtract(5, 'month').toDate()
    //             picker.$emit('pick', [start, end]);
    //         }
    //     }];
    //     return {
    //         disabledDate: (time) => {
    //             if (this.disabledTodayBefore) {
    //                 return time.getTime() < Date.now() - 86400000;
    //             }
    //             if (this.disabledTodayAfter) {
    //                 return time.getTime() > Date.now();
    //             }
    //         },
    //         shortcuts: !this.defaultShortcuts ? null : shortcuts
    //     };
    // }
    // 使用系统时区
    pickerOptions: function () {
      let shortcuts = [{
        text: this.$t('datePickerOptions.today'),
        // 今天
        onClick: (picker) => {
          let timed = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let end = new Date(timed * 1000 + 1000 * 3600 * 24 - 1000 * 1);
          let start = new Date(timed * 1000);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: this.$t('datePickerOptions.yesterday'),
        // 昨天
        onClick: (picker) => {
          let timed = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let end = new Date(timed * 1000 - 1000 * 1);
          let start = new Date(timed * 1000 - 1000 * 3600 * 24 * 1);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: this.$t('datePickerOptions.lastWeek'),
        // 最近7天
        onClick: (picker) => {
          let timed = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let end = new Date(timed * 1000 + 1000 * 3600 * 24 - 1000 * 1);
          let start = new Date(timed * 1000 - 1000 * 3600 * 24 * 6);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: this.$t('datePickerOptions.lastMonth'),
        // 最近1个月
        onClick: (picker) => {
          let timedDay = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let timedMonth = new Date().setMonth((new Date().getMonth() - 1));
          let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
          let start = new Date(timedMonth).setHours(0, 0, 0, 0);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: this.$t('datePickerOptions.lastThreeMonths'),
        // 最近3个月
        onClick: (picker) => {
          let timedDay = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let timedDate = new Date().setMonth((new Date().getMonth() - 3));
          let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
          let start = new Date(timedDate).setHours(0, 0, 0, 0)
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: this.$t('datePickerOptions.lastSixMonths'),
        // 最近6个月
        onClick: (picker) => {
          let timedDay = new Date(new Date().toLocaleDateString()).getTime() / 1000;
          let timedDate = new Date().setMonth((new Date().getMonth() - 6));
          let end = new Date(timedDay * 1000 + 1000 * 3600 * 24 - 1000 * 1);
          let start = new Date(timedDate).setHours(0, 0, 0, 0)
          picker.$emit('pick', [start, end]);
        }
      }];
      return {
        disabledDate: (time) => {
          if (this.disabledTodayBefore) {
            return time.getTime() < Date.now() - 86400000;
          }
          if (this.disabledTodayAfter) {
            return time.getTime() > Date.now();
          }
        },
        shortcuts: !this.defaultShortcuts ? null : shortcuts
      };
    }
  },
  created() {
    // 初始化选中最近 n 天
    if (this.initLastDay != null && this.initLastDay >= 0) {
      // 使用用户选择的时区显示
      // this.dataCache.datetime = [
      //     new Date(this.$store.getters['config/timedDayTimestamp']() * 1000 - 1000 * 3600 * 24 * this.initLastDay),
      //     new Date(this.$store.getters['config/timedDayTimestamp']() * 1000 + 1000 * 3600 * 24 * 1 - 1000 * 1),
      // ];
      // 使用默认的系统时区显示时间
      this.dataCache.datetime = [
        new Date(new Date(new Date().toLocaleDateString()).getTime() - 1000 * 3600 * 24 * this.initLastDay),
        new Date(new Date(new Date().toLocaleDateString()).getTime() + 1000 * 3600 * 24 * 1 - 1000 * 1),
      ];
      console.log(this.dataCache.datetime, this.initLastDay)
      // 初始化时触发 change 事件
      if (this.initLastDayEvent) {
        this.filterChange(this.dataCache.datetime);
      }
    }
  },
  watch: {
    // 外部改变数据
    datetime: {
      immediate: true,
      handler: function (n, o) {
        if (n != o) {
          this.dataCache.datetime = _.isEmpty(n) ? null : [
            new Date(n[0] * 1000),
            new Date(n[1] * 1000),
          ];
        }
      }
    }
  },
  methods: {
    // 点击选中数据
    filterChange(datetime) {
      let datetimeCache = _.cloneDeep(datetime);
      if (!_.isEmpty(datetimeCache)) {
        datetimeCache[0] = this.$store.getters['config/filterDatetimeToTimestamp'](datetimeCache[0]);
        datetimeCache[1] = this.$store.getters['config/filterDatetimeToTimestamp'](datetimeCache[1]);
      }

      // 对外广播事件
      this.$emit('change', datetimeCache);
    },
  },
}
</script>

<style scoped>

</style>
